<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<!-- BEGIN PAGE CONTAINER-->

<div class="container-fluid">

    <!-- BEGIN PAGE HEADER-->

    <div class="row-fluid">

        <div class="span12">

            <!-- BEGIN PAGE TITLE & BREADCRUMB-->

            <ul class="breadcrumb">

                <li>

                    <i class="icon-home"></i>

                    <a href="index.html">首页</a>

                    <i class="icon-angle-right"></i>

                </li>

                <li>

                    <a href="#">系统管理</a>

                    <i class="icon-angle-right"></i>

                </li>

                <li><a href="#">角色管理</a></li>

            </ul>

            <!-- END PAGE TITLE & BREADCRUMB-->

        </div>

    </div>

    <!-- END PAGE HEADER-->

    <!-- BEGIN PAGE CONTENT-->

    <div class="row-fluid">

        <div class="span12">

            <!-- BEGIN EXAMPLE TABLE PORTLET-->

            <div class="portlet box blue">

                <div class="portlet-title">

                    <div class="caption"><i class="icon-edit"></i>角色列表</div>

                    <div class="tools">

                        <a href="javascript:;" class="collapse"></a>

                        <a href="#portlet-config" data-toggle="modal" class="config"></a>

                        <a href="javascript:;" class="reload"></a>

                        <a href="javascript:;" class="remove"></a>

                    </div>

                </div>

                <div class="portlet-body">

                    <div class="clearfix">

                        <div class="btn-group">

                            <button id="sample_editable_1_new" class="btn green">

                                新增 <i class="icon-plus"></i>

                            </button>

                        </div>

                        <div class="btn-group pull-right">

                            <button class="btn dropdown-toggle" data-toggle="dropdown">工具 <i class="icon-angle-down"></i>

                            </button>

                            <ul class="dropdown-menu pull-right">

                                <li><a href="#">打印</a></li>

                                <li><a href="#">另存为 PDF</a></li>

                                <li><a href="#">导出到 Excel</a></li>

                            </ul>

                        </div>

                    </div>

                    <table class="table table-striped table-hover table-bordered" id="sample_editable_1">

                        <thead>

                        <tr>

                            <th></th>

                            <th>key</th>

                            <th>角色名</th>

                            <th>类型</th>

                            <th>创建人</th>

                            <th>创建时间</th>

                        </tr>

                        </thead>

                        <tbody>

                        <tr class="" th:each="role,stat:${roles}">

                            <td th:text="${stat.count}">序号</td>

                            <td th:text="${role.key}">key</td>

                            <td th:text="${role.name}">角色名</td>

                            <td th:text="${role.type}">类型</td>

                            <td th:text="${role.creater}" class="center">创建人</td>

                            <td th:text="${role.createTime}">创建时间</td>

                        </tr>

                        </tbody>

                    </table>

                </div>

            </div>

            <!-- END EXAMPLE TABLE PORTLET-->

        </div>

    </div>

    <!-- END PAGE CONTENT -->

    <div class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
                    <h4 class="modal-title">新增角色</h4>
                </div>
                <div class="modal-body">
                    <form id="addRoleForm" action="role/addRole.do">
                        <div class="form-group">
                            <label class="control-label">key:</label>
                            <input type="text" class="form-control" name="key"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">角色名:</label>
                            <input type="text" class="form-control" name="name"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">类型:</label>
                            <input type="text" class="form-control" name="type"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addRole">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>

<!-- END PAGE CONTAINER-->

<script th:src="@{/js/role.js}" type="text/javascript"></script>

<script>
    $(function () {

        TableEditable.init();

    });
</script>

</body>
</html>